import React, { Component } from 'react'
import axios from 'axios'
class Fenye extends Component {
    state = {
        arr: [],
        total: 0, // 一共有几页,
        fenyetab: []
    }
    componentDidMount() {
        axios.get("/list").then(res => {
            this.setState({  // 给请求回来得arr赋值
                arr: res.data
            })
            setTimeout(() => {
                this.setState({   // 求出一共有几页，一共21条，每页5条，就有5页，最后一页1条
                    total: Math.ceil(this.state.arr.length / 5)
                })
            }, 100)
            setTimeout(() => {
                console.log(this.state.total);// 这是总页数
                // 把总页数这个数字变成一个可以便利得数组
                let crr = []
                for (let i = 1; i <= this.state.total; i++) {
                    crr.push(i)
                }
                console.log(crr);
                this.setState({
                    fenyetab: crr
                })

            }, 200)
        })
    }
    checkindex(item) {
        console.log(item);
        this.props.sendfn(item)
    }
    prev() {
        if (this.props.activeIndex <= 1) {
            alert("您不能在上一页了")
        } else {
            this.props.sendfn(this.props.activeIndex - 1)
        }
    }
    // 点击下一页得方法 
    next() {
        if (this.props.activeIndex >= this.state.total) {
            //this.props.indexActive = this.state.total
            alert("您已经到最后一页l")
        } else {
            this.props.sendfn(this.props.activeIndex + 1)
        }
    }
    render() {
        console.log(this.props.sendfn);
        return (
            <div>
                <span onClick={this.prev.bind(this)}>上一页</span>
                {
                    this.state.fenyetab && this.state.fenyetab.length ? this.state.fenyetab.map((item, index) => {
                        return <span key={index} style={{ marginLeft: "20px" }} onClick={this.checkindex.bind(this, item)} className={this.props.activeIndex == item ? "active" : ""} >{item}</span>
                    }) : ""
                }
                <span onClick={this.next.bind(this)}>下一页</span>
            </div>
        )
    }
}

export default Fenye